<template>
  <div class="app-content">
    <div class="form_wrap">
        <uni-list>
          <uni-list-item title="姓名" :custom="true" :show-arrow="false">
			<div class="inputTip_box">
            	<input type="text" placeholder="请输入姓名" v-model="form.name" @blur="validateName">
				<span class="inputTip">{{inputTips.name}}</span>
			</div>
          </uni-list-item>
           <uni-list-item title="手机号" :custom="true" :show-arrow="false" v-if="!option.id">
			   <div class="inputTip_box">
					<input type="text" placeholder="请输入员工手机号" v-model="form.mobile_phone" @blur="validatePhone">
				   <span class="inputTip">{{inputTips.phone}}</span>
			   </div>
          </uni-list-item>
          <picker :range="jobList" range-key="name" @change="onChange" :value="jobIndex">
           <uni-list-item title="职位" :custom="true" :show-arrow="false">
              <span :class="{ph: !form.job}">{{form.job ? form.job : '请选择'}}</span>
          </uni-list-item>
          </picker>
        </uni-list>
      <div
        class="submit_btn"
        @click="save">保存</div>
    </div>
  </div>
</template>

<script>
import {
	addStaff, editStaff, getStaffDetail
} from '@/api/staffManage'
import {
	nameReg, mobileReg
} from '@/utils/tools/validate'
import uniList from '@/components/uni-list/uni-list'
import uniListItem from '@/components/uni-list-item/uni-list-item'

export default {
	name: 'AddStaff',
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			form: {
				name: '',
				mobile_phone: '',
				job: '',
				auth_role_id: ''
			},
			inputTips: {
				name: '',
				phone: ''
			},
			jobList: [
				{ name: '设计师', id: '3' },
				{ name: '店长/导购', id: '4' },
				{ name: '安装工', id: '5' },
				{ name: '家居顾问', id: '6' }
			],
			jobIndex: 0,
			option: {}
		}
	},
	onLoad(option) {
		this.option = option
		uni.setNavigationBarTitle({
			title: option.id ? '编辑员工' : '添加员工'
		})
		this.init()
	},
	methods: {
		init() {
			if (this.option.id) {
				getStaffDetail({ relation_user_id: this.option.id }).then(res => {
					const { name, job, auth_role_id } = res.data.staff_info
					this.form = { name, job, auth_role_id }
					this.jobIndex = this.jobList.findIndex(item => item.name == job)
				})
			}
		},
		validateName() {
			if (nameReg.test(this.form.name) || !this.form.name) {
				this.inputTips.name = ''
			} else if (this.form.name) {
				this.inputTips.name = '格式错误'
			}
		},
		validatePhone() {
			if (mobileReg.test(this.form.mobile_phone) || !this.form.mobile_phone) {
				this.inputTips.phone = ''
			} else if (this.form.mobile_phone) {
				this.inputTips.phone = '格式错误'
			}
		},
		onChange(e) {
			this.jobIndex = e.target.value
			this.form.job = this.jobList[this.jobIndex].name
			this.form.auth_role_id = this.jobList[this.jobIndex].id
		},
		postForm() {
			const { id, department_id } = this.option
			if (id) {
				return editStaff({ ...this.form, relation_user_id: id })
			} else {
				return addStaff({ ...this.form, department_id })
			}
		},
		save() {
			let flag = true
			Object.keys(this.form).forEach((item) => {
				if (!this.form[item]) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					flag = false
				}
			})
			Object.keys(this.inputTips).forEach((item) => {
			  if (this.inputTips[item]) {
			    flag = false
			  }
			})
			if (flag) {
				this.postForm().then(() => {
					uni.showToast({
						title: this.option.id ? '修改成功' : '添加成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.form_wrap {
    margin-top: 20px;
    input,.ph {
      flex: 1
	}

}

/* .input_box + .input_box {
  margin-top: 20px;
} */
.label {
    font-size:28px;
    color:rgba(102,102,102,1);
}
.submit_btn {
    margin: 60px auto 0;
    width: calc(100% - 60px);
    height:90px;
    line-height: 90px;
    background:rgba(255,209,26,1);
    text-align: center;
    border-radius:10px;
    font-size:24px;
    color:rgba(58,27,4,1);
}
</style>
